<template>
	<view class="card order-item">
		<div class="order-item-hd u-flex u-col-center u-row-between">
			<text>订单：{{ orderinfo.order_no }}</text>
			<text class="text-primary">{{ orderinfo.status_ }}</text>
		</div>
		<!-- <u-read-more showHeight="350px" :fontSize="28" ref="uReadMore" color="#1C1C1E" :shadowStyle="shadowStyle" openText="收起" closeText="更多" textIndent="0"> -->
		<div class="shoplist" @tap="orderShow(orderinfo.id)">
			<shop-item :list="orderinfo.product_info.slice(0, 3)"></shop-item>
			<view class="more" v-if="orderinfo.product_info.length > 3">
				<view class="mask"></view>
				<view>更多...</view>
			</view>
		</div>
		<!-- </u-read-more> -->
		<view class="total">
			<text>共{{ orderinfo.qty }}件商品 总计：</text>
			<text class="price">
				<text class="unit">¥</text>
				<text class="ml6">{{ orderinfo.need_amount }}</text>
			</text>
		</view>
		<div class="order-item-ft u-flex-y-center u-flex-between">
			<view class="t-grey" v-if="orderinfo.hj_num">
				<text class="text-primary u-m-r-10">货位号: {{ orderinfo.hj_num }}</text>
				#{{ orderinfo.order_count }}-{{ orderinfo.order_number }}
			</view>
			<view class="btnlist u-flex-sub u-flex u-flex-end">
				<view class="btn" v-if="orderinfo.status == 2" @click="orderDelete(orderinfo.id)">删除</view>
				<view class="btn" v-if="orderinfo.status == 5 || orderinfo.status == 10" @click="orderShowLog(orderinfo.order_no)">查看物流</view>
				<view class="btn" v-if="[1, 3].includes(orderinfo.status)" @click="orderClose(orderinfo.id)">取消订单</view>
				<!-- <view class="btn active " v-if="[5].includes(orderinfo.status)" @click="orderConfirm(orderinfo.id)">确认收货</view> -->
				<view class="btn active" v-if="orderinfo.status == 1" @click="buttonPay(orderinfo.id)">去支付</view>
				<view class="btn active" @tap="orderShow(orderinfo.id)">查看订单</view>
			</view>
		</div>
	</view>
</template>

<script>
import shopItem from './shop-item.vue';
import { mapState } from 'vuex';
export default {
	data() {
		return {
			state: 0,
			shadowStyle: {
				// #ifndef APP-NVUE
				backgroundImage: 'linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)',
				// #endif
				// #ifdef APP-NVUE
				// nvue上不支持设置复杂的backgroundImage属性
				backgroundImage: 'linear-gradient(to top, #fff, rgba(255, 255, 255, 0.5))',
				// #endif
				paddingTop: '100px',
				marginTop: '-100px'
			}
		};
	},
	components: { shopItem },
	props: {
		orderinfo: {
			type: Object,
			default: () => {}
		}
	},
	computed: {
		...mapState(['userInfo'])
	},
	created() {
		// console.log("评价订单信息" + JSON.stringify(this.orderinfo))
	},
	onLoad() {
		// 模拟后端请求
		setTimeout(() => {
			this.$nextTick(() => {
				this.$refs.uReadMore.init();
			});
		}, 2000);
	},
	methods: {
		//取消订单
		orderClose(id) {
			let $me = this;
			uni.showModal({
				title: '',
				content: '确定要取消订单吗？',
				success: res => {
					if (res.confirm) {
						$me.$postAction($me.$api.orderClose + id).then(da => {
							if (da.code == 0) {
								uni.showToast({
									icon: 'none',
									title: '订单取消成功'
								});
								setTimeout(() => {
									$me.$emit('upload');
								}, 300);
							}
						});
					}
				}
			});
		},
		//确认支付
		buttonPay(id) {
			let $me = this;
			uni.showModal({
				title: '',
				content: '确认支付？',
				success: res => {
					if (res.confirm) {
						this.$Router.push({
							path: '/pages/orderpay/pay',
							query: {
								order_no: this.orderinfo.order_no,
								order_id: id,
								need_amount: this.orderinfo.need_amount,
								user_amount: this.userInfo.money
							}
						});
						return;
						uni.login({
							provider: 'weixin',
							success: loginRes => {
								$me.$postAction($me.$api.orderPay + id, {
									pay_type: 'wx_lite',
									code: loginRes.code
								}).then(da => {
									console.log('确认支付' + JSON.stringify(da));
									if (da.code == 0) {
										let orderInfo = da.data;
										//微信支付
										uni.requestPayment({
											provider: 'wxpay',
											timeStamp: orderInfo.timeStamp,
											nonceStr: orderInfo.nonceStr,
											package: orderInfo.package,
											signType: orderInfo.signType,
											paySign: orderInfo.paySign,
											service: 3,
											success: function (res) {
												setTimeout(function () {
													uni.redirectTo({
														url: '/pages/orderpay/paystate?state=1'
													});
												}, 100);
											},

											fail: function (err) {
												setTimeout(function () {
													uni.redirectTo({
														url: '/pages/orderpay/paystate?state=0'
													});
												}, 100);
											}
										});
									}
								});
							}
						});
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		//查看订单
		orderShow(id) {
			setTimeout(function () {
				uni.navigateTo({
					url: '/pages/order/detail?id=' + id
				});
			}, 200);
		},
		//查看物流
		orderShowLog(order_no) {
			uni.navigateTo({
				url: '/pages/logistics/logistics?order_no=' + order_no
			});
		},
		//确认收货
		orderConfirm(id) {
			let $me = this;
			uni.showModal({
				title: '',
				content: '确认要收货吗？',
				success: function (res) {
					if (res.confirm) {
						$me.$postAction($me.$api.orderConfirm + id).then(da => {
							if (da.code == 0) {
								$me.$emit('upload');
							}
						});
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		//删除订单
		orderDelete(id) {
			let $me = this;
			uni.showModal({
				title: '',
				content: '确认删除订单？',
				success: function (res) {
					if (res.confirm) {
						$me.$postAction($me.$api.orderDelete + id).then(da => {
							if (da.code == 0) {
								$me.$emit('upload');
							}
						});
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.order-item {
	background: #fff;
	color: $u-main-color;
	font-size: 26upx;
	margin-bottom: 25upx;
	&.card {
		border-top: none;
		padding: 0;
		border-radius: 12upx;
	}
	.order-item-hd {
		color: #000;
		font-weight: 500;
		line-height: 45upx;
		font-size: 32upx;
	}
	.order-item-hd,
	.order-item-ft {
		padding: 30upx 32upx;
	}
	.shoplist {
		padding: 0 32upx;
		position: relative;
		.shop-item + .shop-item {
			margin-top: 16upx;
		}
		.more {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			text-align: center;
			color: #1c1c1e;
			font-size: 28upx;
			background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
			.mask {
				height: 244upx;
			}
		}
	}
	.order-item-ft {
		padding-top: 20upx;
	}

	.btnlist {
		.btn {
			display: block;
			color: #636366;
			text-align: center;
			min-width: 104upx;
			height: 60upx;
			line-height: 56upx;
			border-radius: 30upx;
			padding: 0 24upx;
			border: 1px solid #979797;
			&.active {
				background: var(--nav-bg);
				color: #fff;
				border-color: var(--nav-bg);
			}
			& + .btn {
				margin-left: 24upx;
			}
		}
	}

	.total {
		text-align: right;
		font-size: 24upx;
		color: $u-main-color;
		padding: 0 32upx;
		margin-top: 30upx;
		.price {
			.unit {
				font-size: 24upx;
				color: $u-main-color;
			}
			color: var(--nav-bg);
			font-size: 36upx;
		}
	}
}
</style>
